<template>
    <div>
     <el-row>
      <el-col :span="24" class="addRole">
        <!-- 查询 -->
        <el-popover placement="bottom-start" width="500" style="margin-right:10px;" trigger="click">
          <el-form :inline="true" :model="search" label-width="110px" class="demo-ruleForm">
               <el-form-item label="编号"  style="margin-bottom: 5px;">
                  <el-input v-model="search.code"></el-input>
              </el-form-item>
               <el-form-item label="批号"  style="margin-bottom: 5px;">
                  <el-input v-model="search.batch"></el-input>
              </el-form-item>
            <el-form-item label="入库日期" style="margin-bottom: 0;">
                    <el-date-picker v-model="search.time"
                    type="daterange"
                    style="width: 255px;"
                    range-separator="至"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    align="right"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"></el-date-picker>
                </el-form-item>
              <el-button type="primary" @click="searchBtn"  class="text-right">确认</el-button>
              <!-- <el-button type="primary" @click="cleanSearch"  align="right">重置</el-button> -->
          </el-form>
          <el-button slot="reference" type="primary" icon="el-icon-search">查询</el-button>
        </el-popover>
         <el-button  type="primary" @click="isShowDialog('insert')">新增</el-button>
      </el-col>
    </el-row>

    <el-table :data="tabaleData" :highlight-current-row="true" stripe border class="table-index"  style="width: 100%;" :height="tableHeight"
        :header-cell-style="getRowClass" v-loading="loading" >
            <el-table-column fixed type="index" label="*" sortable  min-width="40"></el-table-column>
            <el-table-column prop="cgMaterial.name" label="原料名称"  sortable min-width="100"></el-table-column>
            <el-table-column prop="cgMaterial.type" label="型号" sortable min-width="100"></el-table-column>
            <el-table-column prop="batch" label="批号" sortable min-width="85"></el-table-column>
            <el-table-column prop="cgSupplier.name" label="供应商" sortable  min-width="140"></el-table-column>
            <el-table-column prop="weight" label="总重量(kg)" sortable  min-width="80"></el-table-column>
            <el-table-column prop="nums" label="总数量(件)" sortable  min-width="80"></el-table-column>
            <el-table-column prop="length" label="长度(m)" sortable  min-width="80"></el-table-column>
            <el-table-column prop="inStockDate" label="入库时间" sortable  min-width="90"></el-table-column>
            <el-table-column prop="inStockerName" label="入库人" sortable  min-width="90"></el-table-column>
            <el-table-column prop="remark" label="备注" sortable  min-width="90"></el-table-column>
             <el-table-column prop="createTime" label="创建时间" sortable  min-width="90"></el-table-column>
            <el-table-column fixed="right" label="操作" align="center" width="100">
                <template slot-scope="scope">
                    <el-button @click="isShowDialog('insert',scope.row)" type="text" size="mini">修改</el-button>
                    <el-button @click="isShowDialog('update',scope.row)" type="text" size="mini">添加物料详情</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagination.currentPage" :page-sizes="[5,10, 15,20, 25,30,50, 100]" :page-size="pagination.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"></el-pagination>
         <!-- 基础信息编辑 -->


        <el-dialog  width="800px" center :visible.sync="dialog.isShow" :close-on-click-modal="false" v-dialogDrag>
            <el-tabs v-model="dialog.activeName" @tab-click="handleClick"  >
             <el-tab-pane label="入库信息" name="1" v-if="dialog.type==='insert'"  >
               <el-form :inline="true" class="demo-form-inline" ref="ruleform" :rules="rules"  label-position="right" label-width="150px" :model="dialog.formDate">
                <el-form-item label="原料名称" prop="cgMaterial.name" >
                    <el-autocomplete   v-model="dialog.formDate.cgMaterial.name" :fetch-suggestions="querySaleProductAsync" placeholder="原料名称" @select="queryhandleSelect1"></el-autocomplete>
                </el-form-item>
                <el-form-item label="型号" >
                    <el-input v-model="dialog.formDate.cgMaterial.type" disabled></el-input>
                </el-form-item>
                <el-form-item label="供应商" prop="supplier" >
                   <el-select  v-model="dialog.formDate.supplier" placeholder="请选择供应商">
                      <el-option :label="item.name" :value="item.id" v-for="item in supplierList" :key="item.id"></el-option>
                   </el-select>
                </el-form-item>
                <el-form-item label="批号" prop="batch">
                    <el-input v-model="dialog.formDate.batch" ></el-input>
                </el-form-item>
                <el-form-item label="总重量(kg)" prop="weight">
                    <el-input v-model="dialog.formDate.weight"  type="number"></el-input>
                </el-form-item>
                <el-form-item label="总数量(件)" prop="nums">
                    <el-input v-model="dialog.formDate.nums"  type="number"></el-input>
                </el-form-item>
                <el-form-item label="长度(m)" prop="length">
                    <el-input v-model="dialog.formDate.length"  type="number"></el-input>
                </el-form-item>
                <el-form-item label="入库时间"  prop="inStockDate">
                   <el-date-picker  v-model="dialog.formDate.inStockDate"  format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd" placeholder="入库时间" style="width:200px"  ></el-date-picker>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input  v-model="dialog.formDate.remark" type="textarea" style="width:240px"></el-input>
                </el-form-item>
                <el-form-item label="入库人" v-if="dialog.type==='update'">
                    <el-input v-model="dialog.formDate.inStockerName" disabled></el-input>
                </el-form-item>
                <el-form-item label="创建时间" v-if="dialog.type==='update'">
                    <el-input v-model="dialog.formDate.createTime" disabled></el-input>
                </el-form-item>
                 <el-form-item  class="form-item-block text-center">
                  <el-button type="primary" @click="submitList()">确认</el-button>
              </el-form-item>
            </el-form>

             </el-tab-pane>
             <el-tab-pane label="入库物料详情" name="2" v-if="dialog.type==='update'">
               <el-button  type="primary" @click="showoutStockDialog('insert')">新增</el-button>
               <el-table :data="outStockTablelist" stripe border class="table-index"  :highlight-current-row="true"   style="width: 100%;" v-loading="loading">
                    <el-table-column prop="code" label="条码"  width="130"></el-table-column>
                    <el-table-column prop="weight" label="重量(kg)"  width="80"></el-table-column>
                    <el-table-column prop="outStockDate" label="出库时间"  width="100"></el-table-column>
                    <el-table-column prop="outStockerName" label="出库人"  width="80"></el-table-column>
                    <el-table-column prop="result" label="出库类型"  width="100">
                        <template slot-scope="scope">
                        <span v-if="scope.row.result===-1">异常</span>
                        <span v-if="scope.row.result===1">扫描使用</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="createTime" label="创建时间"  align="center"></el-table-column>
                    <el-table-column fixed="right" label="操作" align="center"  width="100">
                        <template slot-scope="scope">
                        <el-button @click="showoutStockDialog('update',scope.row)" type="text" size="small">详情</el-button>
                        <el-button @click="printQrCode(scope.row,scope.$index)" type="text" size="mini">打印二维码</el-button>
                        </template>
                    </el-table-column>
              </el-table>
                <el-pagination background @size-change="handleSizeChange2" @current-change="handleCurrentChange2" :current-page="pageOutDetail.currentPage" :page-sizes="[5,10, 15,20, 25,30,50, 100]" :page-size="pageOutDetail.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pageOutDetail.total"></el-pagination>
             </el-tab-pane>
             <el-tab-pane label="出库物料详情" name="3" v-if="dialog.type==='update'">
                 <el-table :data="outStockTablelist" stripe border class="table-index"  :highlight-current-row="true"   style="width: 100%;" v-loading="loading">
                    <el-table-column prop="code" label="条码"  width="130"></el-table-column>
                    <el-table-column prop="weight" label="重量(kg)"  width="80"></el-table-column>
                    <el-table-column prop="outStockDate" label="出库时间"  width="100"></el-table-column>
                    <el-table-column prop="outStockerName" label="出库人"  width="80"></el-table-column>
                    <el-table-column prop="result" label="出库类型"  width="100">
                        <template slot-scope="scope">
                        <span v-if="scope.row.result===-1">异常</span>
                        <span v-if="scope.row.result===1">扫描使用</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="createTime" label="创建时间"  align="center"></el-table-column>
                    <el-table-column fixed="right" label="操作" align="center"  width="100">
                    </el-table-column>
                <el-pagination background @size-change="handleSizeChange1" @current-change="handleCurrentChange1" :current-page="pageDetail.currentPage" :page-sizes="[5,10, 15,20, 25,30,50, 100]" :page-size="pageDetail.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pageDetail.total"></el-pagination>
              </el-table>
             </el-tab-pane>
             </el-tabs>
        </el-dialog>
         <el-dialog class="bodyNopaddingTop" :title="outStockDialog.title" :visible.sync="outStockDialog.isShow"  v-dialogDrag width="400px" :close-on-click-modal='false' >
                    <el-form :model="outStockDialog.formData" ref="ruleOutStock"   :rules="outStockRule"  label-width="120px" class="demo-ruleForm" :inline="true" >
                        <el-form-item label="条码" prop="code">
                            <el-input v-model="outStockDialog.formData.code"  style="width：100px"  disabled></el-input>
                        </el-form-item>
                        <el-form-item label="重量(kg)" prop="weight">
                            <el-input v-model="outStockDialog.formData.weight"  style="width：100px"  type="number"></el-input>
                        </el-form-item>
                        <el-form-item  class="form-item-block text-center">
                            <el-button type="primary" @click="onSubmitOutStock()" :disabled="disPlayBtn" >确认</el-button>
                        </el-form-item>

                    </el-form>
         </el-dialog>
               <div id="qrcodep">
                <div id="qrcode" style="position:absolute;right:35px;top:20px;" ></div>
                <div id="name"  style="text-align: center;padding-top:4px;" > </div>
               </div>
    </div>

</template>
<script>
import QRCode from 'qrcodejs2'
import hcHttp from '@/axios/hcHttp.js'
import cgbHttp from '@/axios/cgbHttp.js'
export default {
    data(){
        return {
            disPlayBtn:false,
            tableHeight: document.documentElement.clientHeight - 170,/**表格高度 */
            loading:false,/**加载参数 */
            tabaleData:[],/**表格数据列表 */
            tableDialogHeightTabPane:{/**dialog style */
                height: (document.documentElement.clientHeight - 300) + 'px',
                overflowY: 'auto'
            },
            pagination:{/**分页 */
                pageSize:10,
                currentPage:1,
                total:0
            },
             pageDetail:{/**分页 */
                pageSize:10,
                currentPage:1,
                total:0
            },
             pageOutDetail:{/**分页 */
                pageSize:10,
                currentPage:1,
                total:0
            },
            dialog:{
                title:'',
                type:'',
                isShow:false,
                formDate:{
                    cgMaterial:{},
                    cgSupplier:{},
                },
                activeName:'1',
            },
            supplierList:[],
            search:{
                time:'',
                code:'',
                batch:''
            },
            outStockTablelist:[],
            outStockDialog:{
                title:'',
                type:'',
                isShow:false,
                formData:{},

            },

            rules:{
                  cgMaterial:{
                      name:[
                             { required: true, message: '请选择入库物料', trigger: 'change' }
                      ]
                  },
                  supplier:[
                        { required: true, message: '请选择供应商', trigger: 'change' }
                  ],

                batch:[
                    { required: true, message: '请填写批号', trigger: 'change' }
                    ],
                weight:[
                    { required: true, message: '请填写重量', trigger: 'change' }
                    ],
                inStockDate:[
                    { required: true, message: '请填写入库时间', trigger: 'change' }
                    ],
                nums:[
                    { required: true, message: '请填写数量', trigger: 'change' }
                ]

            },
            outStockRule:{
                 weight:[
                    { required: true, message: '请填写重量', trigger: 'change' }
                    ],
            }
        }
    },
    created(){
        let  self = this;
        self.getTableList()
    },
    methods:{
        getTableList(){
            let self = this,
            data={
               currentPage:self.pagination.currentPage,
               pageSize:self.pagination.pageSize,
               startTime:self.search.time[0],
               endTime:self.search.time[1],
               code:self.search.code,
               batch:self.search.batch
            };
            hcHttp.getHcMaterial(data).then(res=>{
                self.tabaleData=res.content.records
                self.pagination.total = res.content.total;
            })
        },
        searchBtn(){
            this.pagination.currentPage=1;
            this.getTableList();
        },
        handleSizeChange(size){
            this.pagination.pageSize = size;
            this.getTableList();
        },
         handleSizeChange1(size){
            this.pageDetail.pageSize = size;
            this.getInStockTableList();
        },
         handleSizeChange2(size){
            this.pageOutDetail.pageSize = size;
            this.getOutStockTableList();
        },
        handleCurrentChange(current){
            this.pagination.currentPage = current;
            this.getTableList();
        },
        handleCurrentChange1(current){
            this.pageDetail.currentPage = current;
            this.getInStockTableList();
        },
        handleCurrentChange2(current){
            this.pageOutDetail.currentPage = current;
            this.getOutStockTableList();
        },
        isShowDialog(type,row){
            let self = this;
            self.dialog.title = type==='insert'?'新增':'编辑';
            self.dialog.isShow = true;
            self.dialog.type=type;
            switch(type){
                case 'insert':
                self.dialog.activeName='1';
                if(row==undefined){
                  self.dialog.formDate={
                    cgMaterial:{},
                    cgSupplier:{},
                  };
                }else{
                 self.dialog.formDate=row;
                 self.supplierList=[row.cgSupplier];
                }
                break;
                case 'update':
                    self.dialog.activeName='2';
                    self.dialog.formDate=row;
                    self.supplierList=[row.cgSupplier];
                    self.getInStockTableList();
                    break;
            }

        },
        showoutStockDialog(type,row){
           let self = this;
            self.outStockDialog.type=type;
            switch(type){
                case 'insert':
                 //获取目前最大的号
                 hcHttp.getMaxCode().then(res=>{
                    self.outStockDialog.isShow = true;
                    self.outStockDialog.title = '新增入库详情'
                    self.outStockDialog.formData={
                        code:res.content
                    };
                 })
                break;
                case 'update':
                     self.outStockDialog.isShow=true;
                     self.outStockDialog.title = '修改入库详情';
                     self.outStockDialog.formData=JSON.parse(JSON.stringify(row));break;
                case 'delete':
                    self.$confirm('是否删除?', '提示', {
                    confirmButtonText: '删除',
                    cancelButtonText: '取消',
                    confirmButtonClass:'bg-warning noBorder',
                    type: 'warning'
                }).then(() => {

                }).catch(()=> {});
                    break;
            }
        },
        onSubmitOutStock(){
            let self =this;
             self.disPlayBtn=true;
            self.$refs.ruleOutStock.validate((valid)=>{
                if(valid){
                    if(self.outStockDialog.type==='insert'){
                        self.outStockDialog.formData.pid=self.dialog.formDate.id;
                        hcHttp.insertHcMaterialDetail(self.outStockDialog.formData).then(res=>{
                            self.$message.success(`${self.outStockDialog.title}成功`);
                                self.getInStockTableList();
                                self.disPlayBtn=false;
                        }).error(e=>{
                                  self.disPlayBtn=false;
                        })
                    }
                    if(self.outStockDialog.type==='update'){
                        hcHttp.updateHcMaterialDetail(self.outStockDialog.formData).then(res=>{
                            self.$message.success(`${self.outStockDialog.title}成功`);
                                self.outStockDialog.isShow = false;
                                self.getInStockTableList();
                        })
                    }
                } else{
                  this.$message({
                        message: '提交失败',
                        type: 'warning'
                        });
                    return false;
                }
            })

        },
        submitList(){
            let self = this;
            self.$refs.ruleform.validate((valid)=>{
                if(valid){
                    let type = self.dialog.title.indexOf("新增") > -1 ? "insert" : "update";
                    let postData = {...self.dialog.formDate}
                    hcHttp.insertUpdateHcMaterial(self.dialog.type,postData).then(res=>{
                        self.$message.success(`${self.dialog.title}成功`);
                        self.dialog.isShow = false;
                        self.getTableList();
                    })
                }
            })

        },
        printQrCode(row){
            let self=this;
           self.$nextTick(function () {
                    let qrcode = new QRCode("qrcode", {
                        //大标签150
                        width: 80,
                        height: 80,
                        text: row.code,
                        colorDark: "#000000",
                        colorLight: "#ffffff"
                    });
                });
          setTimeout(()=>{
              document.getElementById("name").innerHTML=row.code
          self.$print(document.getElementById("qrcodep"));
           document.getElementById("qrcode").innerHTML = "";
           document.getElementById("name").innerHTML="";
           },200)
        },
        handleClick(){
          let self = this;
            switch(self.dialog.activeName){
                case '2':self.getInStockTableList();break;
                case '3':self.getOutStockTableList();break;
            }
        },
        getInStockTableList(){
         let self = this,
            data={
               currentPage:self.pageDetail.currentPage,
               pageSize:self.pageDetail.pageSize,
               pid:self.dialog.formDate.id,
            };
          hcHttp.getHcMaterialDetailByPid(data).then(res=>{
              self.outStockTablelist=res.content.records;
              self.pageDetail.total=res.content.total
          })
        },
        getOutStockTableList(){
             let self = this,
            data={
               currentPage:self.pageOutDetail.currentPage,
               pageSize:self.pageOutDetail.pageSize,
               pid:self.dialog.formDate.id,
               result:1,
            };
          hcHttp.getHcMaterialDetailByPid(data).then(res=>{
              self.outStockTablelist=res.content.records;
              self.pageOutDetail.total=res.content.total
          })
        },
        querySaleProductAsync(queryString, callback){
            cgbHttp.searchMaterialKeyWord({name:queryString?queryString:''}).then(res=>{
                res.content.forEach(item=>{
                item.value = item.type+"_"+item.name;
                })
                callback(res.content);
            })
        },
        queryhandleSelect1(item){
            let self=this;
           self.dialog.formDate.material=item.id;
           let a= item.value.split("_");
            self.dialog.formDate.cgMaterial.type=a[0];
            //供应商列表
               cgbHttp.allCgSupplierByMid(item.id).then(res=>{
                 self.supplierList=res.content;
               })
        },

    }
}
</script>
<style scoped>
.icon-circle{
    line-height: 100%;
    font-size:18px;
}
</style>
